<template>
  <div class="">
        <el-container class="form-container" style="">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>&nbsp;</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="handlerEdit">编辑</el-button>
                </div>
                <div >
                   <el-form  :rules="rules"  ref="form"   :model="form" size="small" label-width="120px">
                    <el-row>
                      <el-col :span="24">
                        <div class="form_title">{{form.fdName}}</div>
                      </el-col>
                    </el-row>
                   <el-divider></el-divider>
                  <form-viewer ref="formViewer" v-model="form.fdValue" :buildData="form.fdContent"></form-viewer>
                   </el-form>
                </div>
            </el-card>
        </el-container>
    </div>
</template>

<script>
import formUtils from '@/utils/formUtils';
export default {
  name:'fancyFormDesigner',
  data() {
    return{
      form: {
        fdId:'',
        fdName: '',
        fdTemplateId:'',
        fdTemplateName:'',
        fdContent:'',
        fdValue:''
      },
      rules:{
        fdName:[
          { required: true, message: '标题不能为空',trigger:'blur'}
        ]
      }
    }
  },

  computed:{
    itemList(){
      if(this.form.fdContent!==''){
        const form = JSON.parse(this.form.fdContent);
        return form.list;
      }else{
        return [];
      }
    }
  },
  methods: {
    initParam(){
      if(formUtils.isNotEmpty(this.$route.query.fdId)){ //编辑页面
        const fdId = this.$route.query.fdId;
        this.$fetch('/api/sys/form/sys_form_main',{
          id:fdId
        }).then((res) => {
          formUtils.convertToForm(res.data,this.form);
        });
      }
    },
    handlerEdit(){
      const fdId = this.$route.query.fdId;
      const params = {
          path: "/sys/form/sys_form_main/edit",
          query: {fdId:fdId}
      }
      this.$router.push(params);
    }, 
    handlerDelete(){
      this.$confirm('此操作将删除该条记录,是否继续?').then(() => {
        const fdId = this.$route.query.fdId;
        const param = {
          id:fdId
        }
        this.$delete('/api/sys/form/sys_form_main',param).then((res) => {
          this.fullscreenLoading = false;
          if(res.status==1){
            this.$message({
              message: res.message,
              type: 'success',
              onClose: function (){
                window.close();
              }
            });
          }else{
            this.$message.error(res.message);
          }
        })
      });
    }
  },
  mounted(){
    this.initParam();
  },
  watch:{
  }
}
</script>

<style scoped>
@import "~@/assets/css/form.css";
.container{
  width: 100%;
}
.breadcrumb{
  height:15px;
  margin-top:45px;
  margin-bottom: 10px;
}
.el-tabs--border-card .el-tabs__content{
  padding: 0px;
}
</style>